<template>
	<view class="relative-position">

		<image :src="detail.thumb" mode="widthFix" class="origin-img"></image>
		<view class="padding-10">
			<u-form :model="infoForm" :labelWidth="80">
				<!--        <u-form-item label="证书样式" prop="type" @click="showPop = true">
          <u-input
              placeholder="证书样式"
              disabled
              disabledColor="#ffffff"
              v-model="infoForm.type"
          />
        </u-form-item>-->
				<u-form-item label="男方姓名" prop="manName">
					<u-input placeholder="男方姓名" v-model="infoForm.manName" />
				</u-form-item>
				<u-form-item label="女方姓名" prop="mealName">
					<u-input placeholder="女方姓名" v-model="infoForm.mealName" />
				</u-form-item>
				<!--        <u-form-item label="领证日期" prop="date">
          <u-input placeholder="xx年xx月xx日" v-model="infoForm.date"/>
        </u-form-item>-->
				<u-button text="立即生成" color="#FFC107" @click="onSaveData" class="margin-top-10"></u-button>
			</u-form>
		</view>
		<l-painter :board="poster" isCanvasToTempFilePath @success="getImg($event)" hidden />
		<!--    <loading/>-->
		<video-a-d />
	</view>
</template>

<script>
	import {
		base64ToPath
	} from "image-tools";
	import Loading from "../../components/loading";

	export default {
		components: {
			Loading
		},
		data() {
			return {
				poster: {},
				infoForm: {
					manName: "",
					mealName: "",
					date: "二零零二年三月八日",
					type: "",
				},
				showPop: false,
				imgUrl: "",
				detail: {
					name: "民国结婚证",
					id: 0,
					img: "http://www.tejiawang.work/imgs/jiehz/01.png",
					thumb: "http://www.tejiawang.work/imgs/jiehz/01.jpg"
				},
			};
		},
		methods: {
			onSaveData() {
				if (
					!this.infoForm.manName ||
					!this.infoForm.mealName ||
					!this.infoForm.date
				) {
					this.$util.showToast("请填写完整信息");
					return;
				}
				this.$util.showLoading('生成中，请耐心等待');
				this.showIntersAD();
				this.poster = {
					css: {
						width: "750rpx",
						position: "relative"
					},
					views: [{
							type: "image",
							src: this.detail.img,
							css: {
								width: "100%",
								minHeight: "200rpx",
							},
						},
						{
							type: "text",
							text: this.infoForm.manName,
							css: {
								fontSize: "14rpx",
								width: "18rpx",
								position: "absolute",
								lineHeight: "16rpx",
								top: "292rpx",
								left: "289rpx",
								color: "#000000",
								zIndex: 10,
							},
						},
						{
							type: "text",
							text: this.infoForm.mealName,
							css: {
								fontSize: "14rpx",
								width: "18rpx",
								position: "absolute",
								lineHeight: "16rpx",
								top: "292rpx",
								left: "309rpx",
								color: "#000000",
								zIndex: 10,
							},
						},
					],
				};

				// poster=posterData
			},

		},
	};
</script>

<style lang="scss" scoped>
	.origin-img {
		width: 100%;
		display: block;
		min-width: 100px;
	}
</style>
